<template>
  <div class="upload-container">
    <el-upload
      class="upload-demo"
      drag
      :action="uploadAction"
      :auto-upload="false"
      :on-change="handleChange"
      :show-file-list="false"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        拖拽文件到此处或 <em>点击选择</em>
      </div>
    </el-upload>

    <div v-if="file" class="file-info">
      <i class="el-icon-document"></i>
      <span>{{ file.name }} ({{ formatFileSize(file.size) }})</span>
    </div>

    <el-button
      type="primary"
      :disabled="!file"
      @click="submitUpload"
      class="upload-btn"
    >
      上传文件
    </el-button>

    <div v-if="message" :class="['message', messageType]">
      {{ message }}
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null,
      message: '',
      messageType: '',
      uploadAction: 'http://localhost:9300/upload'
    }
  },
  methods: {
    handleChange(file) {
      this.file = file.raw;
      this.message = '';
    },
    formatFileSize(bytes) {
      if (bytes === 0) return '0 Bytes';
      const k = 1024;
      const sizes = ['Bytes', 'KB', 'MB', 'GB'];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    },
    async submitUpload() {
      if (!this.file) return;

      const formData = new FormData();
      formData.append('file', this.file);

      try {
        // 使用axios替代this.$axios
        const response = await axios.post(this.uploadAction, formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });

        this.message = response.data.message || '上传成功';
        this.messageType = 'success';
        this.file = null;
      } catch (error) {
        console.error('上传失败:', error);
        this.message = '上传失败: ' + (error.response?.data?.message || error.message);
        this.messageType = 'error';
      }
    }
  }
}
</script>

<style scoped>
/* 样式保持不变 */
.upload-container {
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
}

.upload-demo {
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.3s;
}

.upload-demo:hover {
  border-color: #409eff;
}

.el-upload__text {
  color: #606266;
  margin-top: 10px;
}

.el-upload__text em {
  color: #409eff;
  font-style: normal;
}

.file-info {
  margin: 1rem 0;
  padding: 12px 16px;
  background-color: #f5f7fa;
  border-radius: 4px;
  display: flex;
  align-items: center;
  color: #606266;
}

.file-info i {
  margin-right: 8px;
  color: #909399;
}

.upload-btn {
  width: 100%;
  margin-top: 1rem;
}

.message {
  margin-top: 1rem;
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 14px;
}

.success {
  background-color: #f0f9eb;
  color: #67c23a;
  border: 1px solid #e1f3d8;
}

.error {
  background-color: #fef0f0;
  color: #f56c6c;
  border: 1px solid #fde2e2;
}
</style>
